<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>常见的几种css布局 | dmf的个人博客</title><meta name="author" content="dmf"><meta name="copyright" content="dmf"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="描述">
<meta property="og:type" content="article">
<meta property="og:title" content="常见的几种css布局">
<meta property="og:url" content="https://gitee.com/dmf-c/blog/2021/05/15/css_file/CommonLayouts/index.html">
<meta property="og:site_name" content="dmf的个人博客">
<meta property="og:description" content="描述">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img1.baidu.com/it/u=1828439677,2166285235&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=300">
<meta property="article:published_time" content="2021-05-14T16:00:00.000Z">
<meta property="article:modified_time" content="2022-10-12T08:03:41.381Z">
<meta property="article:author" content="dmf">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img1.baidu.com/it/u=1828439677,2166285235&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=300"><link rel="shortcut icon" href="/blog/img/favicon.png"><link rel="canonical" href="https://gitee.com/dmf-c/blog/2021/05/15/css_file/CommonLayouts/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/blog/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/blog/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '常见的几种css布局',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-10-12 16:03:41'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">27</div></a><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">0</div></a><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog/"><i class="fa-fw iconfont icon-shouyex"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw iconfont icon-zuixinwenzhang_huaban"></i><span> 找文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/categories/"><i class="fa-fw iconfont icon-fenlei1"></i><span> 分类</span></a></li><li><a class="site-page child" href="/blog/tags/"><i class="fa-fw iconfont icon-biaoqian1"></i><span> 标签</span></a></li><li><a class="site-page child" href="/blog/archives/"><i class="fa-fw iconfont icon-shijianzhou"></i><span> 归档</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/blog/">dmf的个人博客</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog/"><i class="fa-fw iconfont icon-shouyex"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw iconfont icon-zuixinwenzhang_huaban"></i><span> 找文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/categories/"><i class="fa-fw iconfont icon-fenlei1"></i><span> 分类</span></a></li><li><a class="site-page child" href="/blog/tags/"><i class="fa-fw iconfont icon-biaoqian1"></i><span> 标签</span></a></li><li><a class="site-page child" href="/blog/archives/"><i class="fa-fw iconfont icon-shijianzhou"></i><span> 归档</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">常见的几种css布局</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="fa-fw post-meta-icon far fa-calendar-alt"></i><span class="post-meta-label">发表于</span><time datetime="2021-05-14T16:00:00.000Z" title="发表于 2021-05-15 00:00:00">2021-05-15</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/blog/categories/css/">css</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="常见的几种css布局"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="单列布局"><a href="#单列布局" class="headerlink" title="单列布局"></a>单列布局</h2><p>常见的单列布局有两种：</p>
<ul>
<li>header,content和footer等宽的单列布局</li>
<li>header与footer等宽,content略窄的单列布局</li>
</ul>
<h3 id="如何实现"><a href="#如何实现" class="headerlink" title="如何实现"></a>如何实现</h3><p>对于第一种，先通过对header,content,footer统一设置width：1000px;或者max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置margin:auto实现居中即可得到。</p>
<pre><code>&lt;div class=&quot;header&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;content&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;footer&quot;&gt;&lt;/div&gt;

.header&#123;
    margin:0 auto; 
    max-width: 960px;
    height:100px;
    background-color: blue;
&#125;
.content&#123;
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
&#125;
.footer&#123;
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
&#125;
</code></pre>
<p>对于第二种，header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。</p>
<pre><code>&lt;div class=&quot;header&quot;&gt;
    &lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;footer&quot;&gt;&lt;/div&gt;

.header&#123;
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: blue;
&#125;
.nav&#123;
    margin: 0 auto;
    max-width: 800px;
    background-color: darkgray;
    height: 50px;
&#125;
.content&#123;
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
&#125;
.footer&#123;
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
&#125;
</code></pre>
<h2 id="两列自适应布局"><a href="#两列自适应布局" class="headerlink" title="两列自适应布局"></a>两列自适应布局</h2><p><strong>两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式</strong></p>
<p><strong>1.float+overflow:hidden</strong></p>
<p>如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。具体代码如下：</p>
<pre><code>&lt;div class=&quot;parent&quot; style=&quot;background-color: lightgrey;&quot;&gt;
    &lt;div class=&quot;left&quot; style=&quot;background-color: lightblue;&quot;&gt;
        &lt;p&gt;left&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;right&quot;  style=&quot;background-color: lightgreen;&quot;&gt;
        &lt;p&gt;right&lt;/p&gt;
        &lt;p&gt;right&lt;/p&gt;
    &lt;/div&gt;        
&lt;/div&gt;

.parent &#123;
overflow: hidden;
zoom: 1;
&#125;
.left &#123;
float: left;
margin-right: 20px;
&#125;
.right &#123;
overflow: hidden;
zoom: 1;
&#125;
</code></pre>
<p><strong>注意点:如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容</strong></p>
<p><strong>2.Flex布局</strong></p>
<p>Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。</p>
<pre><code>//html部分同上
.parent &#123;
display:flex;
&#125;  
.right &#123;
margin-left:20px; 
flex:1;
&#125;
</code></pre>
<p><strong>3.grid布局</strong></p>
<p>Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计</p>
<pre><code>//html部分同上
.parent &#123;
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
&#125; 
</code></pre>
<h2 id="三栏布局"><a href="#三栏布局" class="headerlink" title="三栏布局"></a>三栏布局</h2><p><strong>特征：中间列自适应宽度，旁边两侧固定宽度</strong></p>
<p><strong>1.圣杯布局</strong></p>
<p><strong>① 特点</strong></p>
<p><strong>比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。</strong></p>
<pre><code>.container &#123;
    padding-left: 220px;//为左右栏腾出空间
    padding-right: 220px;
&#125;
.left &#123;
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
&#125;
.center &#123;
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
&#125;
.right &#123;
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
&#125;

&lt;article class=&quot;container&quot;&gt;
    &lt;div class=&quot;center&quot;&gt;
    &lt;h2&gt;圣杯布局&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class=&quot;left&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;right&quot;&gt;&lt;/div&gt;
&lt;/article&gt;
</code></pre>
<p><strong>② 实现步骤</strong></p>
<ul>
<li><p>三个部分都设定为左浮动，否<strong>则左右两边内容上不去，就不可能与中间列同一行。</strong>然后设置center的宽度为100%(<strong>实现中间列内容自适应</strong>)，此时，left和right部分会跳到下一行</p>
</li>
<li><p>通过设置margin-left为负值让left和right部分回到与center部分同一行</p>
</li>
<li><p>通过设置父容器的padding-left和padding-right，让左右两边留出间隙。</p>
</li>
<li><p>通过设置相对定位，让left和right部分移动到两边。</p>
</li>
</ul>
<p><strong>③ 缺点</strong></p>
<ul>
<li><p>center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行</p>
</li>
<li><p>如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决，下文会介绍)</p>
</li>
</ul>
<p><strong>2.双飞翼布局</strong></p>
<p><strong>① 特点</strong></p>
<p><strong>同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。</strong></p>
<pre><code>.container &#123;
    min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
&#125;
.left &#123;
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
&#125;
.center &#123;
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
&#125;
.center .inner &#123;
    margin: 0 200px; //新增部分
&#125;
.right &#123;
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
&#125;

&lt;article class=&quot;container&quot;&gt;
    &lt;div class=&quot;center&quot;&gt;
        &lt;div class=&quot;inner&quot;&gt;双飞翼布局&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;left&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;right&quot;&gt;&lt;/div&gt;
&lt;/article&gt;
</code></pre>
<p><strong>② 实现步骤(前两步与圣杯布局一样)</strong></p>
<ul>
<li><p>三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；</p>
</li>
<li><p>通过设置margin-left为负值让left和right部分回到与center部分同一行；</p>
</li>
<li><p>center部分增加一个内层div，并设margin: 0 200px；</p>
</li>
</ul>
<p><strong>③ 缺点</strong></p>
<p><strong>多加一层 dom 树节点，增加渲染树生成的计算量。</strong></p>
<p><strong>3.两种布局实现方式对比:</strong></p>
<ul>
<li><p>两种布局方式都是把主列放在文档流最前面，使主列优先加载。</p>
</li>
<li><p>两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。</p>
</li>
<li><p>两种布局方式的不同之处在于如何处理中间主列的位置：</p>
</li>
</ul>
<p><strong>圣杯布局是利用父容器的左、右内边距+两个从列相对定位</strong>；</p>
<p><strong>双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整</strong></p>
<h2 id="等高布局"><a href="#等高布局" class="headerlink" title="等高布局"></a>等高布局</h2><p>等高布局是指子元素在父元素中高度相等的布局方式。接下来我们介绍常见几种实现方式：</p>
<p><strong>1.利用正padding+负margin</strong></p>
<p>我们通过等布局便可解决圣杯布局的第二点缺点，因为背景是在 padding 区域显示的，<strong>设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。</strong>这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下：</p>
<pre><code>.center,
.left,
.right &#123;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
&#125;
.container &#123;
  padding-left: 220px;
  padding-right: 220px;
  overflow: hidden;//把溢出背景切掉
&#125;
</code></pre>
<p><strong>2.利用背景图片</strong></p>
<p>这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。</p>
<p>在制作样式之前需要一张类似下面的背景图：</p>
<pre><code>&lt;div class=”container clearfix”&gt;
    &lt;div class=”left”&gt;&lt;/div&gt;
    &lt;div  class=”content”&gt;&lt;/div&gt;
    &lt;div class=”right”&gt;&lt;/div&gt;
&lt;/div&gt;

.container &#123;
background: url(&quot;column.png&quot;) repeat-y;
width: 960px;
margin: 0 auto;
&#125;
.left &#123;
float: left;
width: 220px;
&#125;
.content &#123;
float: left;
width: 480px;
&#125;
.right &#123;
float: left;
width: 220px;
&#125;
</code></pre>
<p><strong>3.模仿表格布局</strong></p>
<p>这是一种非常简单，易于实现的方法。不过兼容性不好，在ie6-7无法正常运行。</p>
<pre><code>&lt;div class=&quot;container table&quot;&gt;
   &lt;div class=&quot;containerInner tableRow&quot;&gt;
     &lt;div class=&quot;column tableCell cell1&quot;&gt;
       &lt;div class=&quot;left aside&quot;&gt;
         ....
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;column tableCell cell2&quot;&gt;
       &lt;div class=&quot;content section&quot;&gt;
         ...
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;column tableCell cell3&quot;&gt;
       &lt;div class=&quot;right aside&quot;&gt;
         ...
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;

.table &#123;
width: auto;
min-width: 1000px;
margin: 0 auto;
padding: 0;
display: table;
&#125;
.tableRow &#123;
display: table-row;
&#125;
.tableCell &#123;
display: table-cell;
width: 33%;
&#125;
.cell1 &#123;
background: #f00;
height: 800px;
&#125;
.cell2 &#123;
background: #0f0;
&#125;
.cell3 &#123;
background: #00f;
&#125;
</code></pre>
<p><strong>4.使用边框和定位</strong></p>
<p>这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。结构简单，兼容各浏览器，容易掌握。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。</p>
<pre><code>#wrapper &#123;
width: 960px;
margin: 0 auto;
&#125;
#mainContent &#123;
border-right: 220px solid #dfdfdf;
position: absolute;
width: 740px;
height: 800px;  
background: green;
&#125;
#sidebar &#123;
background: #dfdfdf;
margin-left: 740px;
position: absolute;
height: 800px;
width: 220px;
&#125;

&lt;div id=&quot;wrapper&quot;&gt;
    &lt;div id=&quot;mainContent&quot;&gt;...&lt;/div&gt;
    &lt;div id=&quot;sidebar&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h2 id="粘连布局"><a href="#粘连布局" class="headerlink" title="粘连布局"></a>粘连布局</h2><p><strong>1.特点</strong></p>
<ul>
<li><p>有一块内容<code>&lt;main&gt;</code>，当<code>&lt;main&gt;</code>的高康足够长的时候，紧跟在<code>&lt;main&gt;</code>后面的元素<code>&lt;footer&gt;</code>会跟在<code>&lt;main&gt;</code>元素的后面。</p>
</li>
<li><p>当<code>&lt;main&gt;</code>元素比较短的时候(比如小于屏幕的高度),我们期望这个<code>&lt;footer&gt;</code>元素能够“粘连”在屏幕的底部</p>
</li>
</ul>
<p>具体代码如下：</p>
<pre><code>&lt;div id=&quot;wrap&quot;&gt;
  &lt;div class=&quot;main&quot;&gt;
    main &lt;br /&gt;
    main &lt;br /&gt;
    main &lt;br /&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;footer&quot;&gt;footer&lt;/div&gt;

   * &#123;
    margin: 0;
    padding: 0;
  &#125;
  html,
  body &#123;
    height: 100%;//高度一层层继承下来
  &#125;
  #wrap &#123;
    min-height: 100%;
    background: pink;
    text-align: center;
    overflow: hidden;
  &#125;
  #wrap .main &#123;
    padding-bottom: 50px;
  &#125;
  #footer &#123;
    height: 50px;
    line-height: 50px;
    background: deeppink;
    text-align: center;
    margin-top: -50px;
  &#125;
</code></pre>
<p><strong>2.实现步骤</strong></p>
<p><strong>(1)footer必须是一个独立的结构，与wrap没有任何嵌套关系</strong></p>
<p><strong>(2)wrap区域的高度通过设置min-height，变为视口高度</strong></p>
<p><strong>(3)footer要使用margin为负来确定自己的位置</strong></p>
<p><strong>(4)在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。</strong></p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://gitee.com/dmf-c/blog">dmf</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://gitee.com/dmf-c/blog/2021/05/15/css_file/CommonLayouts/">https://gitee.com/dmf-c/blog/2021/05/15/css_file/CommonLayouts/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://gitee.com/dmf-c/blog" target="_blank">dmf的个人博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/blog/2021/05/23/css_file/ThreeColumns/"><img class="prev-cover" src="https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300" onerror="onerror=null;src='/blog/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">实现三栏布局的几种方法</div></div></a></div><div class="next-post pull-right"><a href="/blog/2021/05/01/css_file/LessUsage/"><img class="next-cover" src="https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300" onerror="onerror=null;src='/blog/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">less的用法</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/blog/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">dmf</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">27</div></a><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">0</div></a><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">业精于勤，荒于嬉。</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E5%88%97%E5%B8%83%E5%B1%80"><span class="toc-number">1.</span> <span class="toc-text">单列布局</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0"><span class="toc-number">1.1.</span> <span class="toc-text">如何实现</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%A4%E5%88%97%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80"><span class="toc-number">2.</span> <span class="toc-text">两列自适应布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80"><span class="toc-number">3.</span> <span class="toc-text">三栏布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AD%89%E9%AB%98%E5%B8%83%E5%B1%80"><span class="toc-number">4.</span> <span class="toc-text">等高布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B2%98%E8%BF%9E%E5%B8%83%E5%B1%80"><span class="toc-number">5.</span> <span class="toc-text">粘连布局</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/blog/2023/01/08/vue_file/vuenote/" title="vue3入门笔记"><img src="https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="vue3入门笔记"/></a><div class="content"><a class="title" href="/blog/2023/01/08/vue_file/vuenote/" title="vue3入门笔记">vue3入门笔记</a><time datetime="2023-01-07T16:00:00.000Z" title="发表于 2023-01-08 00:00:00">2023-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2022/02/20/vue_file/comm/" title="vue组件间通信六种方式"><img src="https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="vue组件间通信六种方式"/></a><div class="content"><a class="title" href="/blog/2022/02/20/vue_file/comm/" title="vue组件间通信六种方式">vue组件间通信六种方式</a><time datetime="2022-02-19T16:00:00.000Z" title="发表于 2022-02-20 00:00:00">2022-02-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2022/02/05/wxEcharts/" title="微信小程序使用 echarts"><img src="https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="微信小程序使用 echarts"/></a><div class="content"><a class="title" href="/blog/2022/02/05/wxEcharts/" title="微信小程序使用 echarts">微信小程序使用 echarts</a><time datetime="2022-02-04T16:00:00.000Z" title="发表于 2022-02-05 00:00:00">2022-02-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2022/01/30/vue_file/vue_router/" title="vue-router学习"><img src="https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="vue-router学习"/></a><div class="content"><a class="title" href="/blog/2022/01/30/vue_file/vue_router/" title="vue-router学习">vue-router学习</a><time datetime="2022-01-29T16:00:00.000Z" title="发表于 2022-01-30 00:00:00">2022-01-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/2022/01/16/vue_file/vuex/" title="Vuex使用方法"><img src="https://img1.baidu.com/it/u=1828439677,2166285235&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=400&amp;h=300" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="Vuex使用方法"/></a><div class="content"><a class="title" href="/blog/2022/01/16/vue_file/vuex/" title="Vuex使用方法">Vuex使用方法</a><time datetime="2022-01-15T16:00:00.000Z" title="发表于 2022-01-16 00:00:00">2022-01-16</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By dmf</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/blog/js/utils.js"></script><script src="/blog/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>